<template>
  <div>
    <a-form @submit.prevent="addNotification">
      <a-form-item>
        <a-input v-model:value="newNotificationContent" placeholder="Enter notification content" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">添加通知</a-button>
      </a-form-item>
    </a-form>

    <a-table :dataSource="notifications" rowKey="id">
      <a-table-column title="ID" dataIndex="id" key="id" />
      <a-table-column title="Content" dataIndex="content" key="content" />


      <a-table-column title="Update" dataIndex="content" key="content">
        <template v-slot="{ record }">
          <a-input v-model:value="record.content"/>
<!--          <a-button type="primary" html-type="sumbit" @click="() => updateNotification(record)">更改</a-button>-->
        </template>
      </a-table-column>

      <a-table-column title="Action" key="action">
        <template v-slot="{ record }">
          <a-button  @click="() => deleteNotification(record.id)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue';
import { useNotificationStore } from '../stores/notificationStore';

const notificationStore = useNotificationStore();
const notifications = ref(notificationStore.notifications);
const newNotificationContent = ref('');
// const newContent = ref('');

const addNotification = async () => {
  await notificationStore.createNotification(newNotificationContent.value);
  newNotificationContent.value = ''; // 清空输入框
};

// const updateNotification = async (notification) => {
//   const id = notification.id;
//   const newContent = notification.content
//   await notificationStore.updateNotification(id, newContent);
// };

const deleteNotification = async (id) => {
  await notificationStore.deleteNotification(id);
};

watch(
    () => notificationStore.notifications,
    (newNotifications) => {
      notifications.value = newNotifications;
    }
);

onMounted(() => {
  notificationStore.fetchNotifications();
});
</script>

<style scoped>
</style>
